<template>
    <!--热门图书-->
    <div class="contain">
        <div class="banner">
            <div class="swiper-container banner-swipe2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"
                         v-for="product in productList"
                         :key="product.id">
                        <div class="book-intro">
                            <div class="book-left" :style="{background:'url('+product.fengmian_pic_url+')','background-size': 'cover'}">
                                <span>{{ product.first_lab_name }}</span>
                            </div>
                            <div class="book-right">
                                <div class="book-intro-title">
                                    <p>{{ product.name }}</p>
                                    <p>{{ product.good_desc }}</p>
                                </div>
                                <div class="block"></div>
                                <p>{{product.secend_lab_name}}</p>
                                <div class="buy-box" @click="goPay(product)">
                                    <span>￥<b>{{ product.one_price | fixNumber }}</b></span>
                                    <button>去购买</button>
                                </div>
                            </div>
                        </div>
                        <p>得心应手系列丛书</p>
                    </div>

                </div>
                <!-- 分页器 -->
                <!--<div class="swiper-pagination"></div>-->
                <!-- 导航按钮 -->
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>
<script>
import Swiper from 'swiper';

export default {
    name: 'productBookView',
    components: {
        /**/
    },
    data() {
        return {
            account: '',
            banner2: null,
            productList: []
        };
    },
    watch: {
        /**/
    },
    mounted() {
        this.doGetGoodsJF();
    },
    methods: {
        initSwipe() {
            this.banner2 = new Swiper('.banner-swipe2', {
                slidesPerView: 4,
                spaceBetween: 20,
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
                // 如果需要前进后退按钮
//                 nextButton: 'swiper-button-next',
//                 prevButton: 'swiper-button-prev',
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                // 如果需要滚动条
                /*scrollbar: {
                    el: '.swiper-scrollbar',
                },*/

            });
        },
        doGetGoodsJF() {
            this.$api.ajaxData({
                pathName: 'doGetGoodsJF',
                params: {
                    page: 1,
                    size: 20
                }
            }).then(data => {
                this.productList = data.obj
                this.$nextTick(()=>{
                    this.initSwipe();
                })
            })
        },
        goPay(course){
            let routeData = this.$router.resolve({ name: 'landingPage', query: {  id: course.id } });
            window.open(routeData.href, '_blank');
        }
    }
};
</script>
<style scoped lang="scss">
    ul,li,p {
        margin-bottom: 0;
    }
.contain {
    height: 218px;
    overflow: hidden;
    .banner {
        height: 100%;
        margin: 20px 60px;
        overflow: hidden;
        .swiper-container {
            height: 100%;
            overflow: inherit;

            .swiper-slide {
                height: 100%;
                width: 25%;
                padding: 0 10px;
                box-sizing: border-box;
                .book-intro {
                    margin-bottom: 10px;

                    .book-left {
                        float: left;
                        display: flex;
                        width: 92px;
                        height: 122px;
                        font-size: 28px;
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                        background: #e4e4e4;
                        color: #fff;
                        align-items: center;
                        justify-content: center;

                        span {
                            display: block;
                            height: 32px;
                            line-height: 32px;
                        }
                    }

                    .book-right {
                        position: relative;
                        padding: 0 0 0 100px;

                        .book-intro-title {
                            p {
                                line-height: 20px;
                                font-weight: 400;
                                font-style: normal;
                                font-size: 14px;
                                text-align: right;
                                color: #333;
                            }

                            p:first-child {
                                line-height: 24px;
                                font-size: 16px;
                                text-align: left;
                            }
                        }

                        .block {
                            margin: 5px 0;
                            height: 1px;
                            background: #ccc;
                        }

                        p {
                            font-size: 13px;
                            color: #aeaeae;
                        }

                        .buy-box {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            height: 24px;
                            display: flex;
                            justify-content: space-between;
                            width: 100%;
                            padding-left: 100px;
                            box-sizing: border-box;

                            span {
                                font-size: 14px;
                                color: #ff6a00;

                                b {
                                    font-size: 18px;
                                }
                            }

                            button {
                                height: 24px;
                                width: 68px;
                                line-height: 24px;
                                padding: 0;
                                margin: 0;
                                font-size: 12px;
                                font-weight: bold;
                                background: rgba(255, 153, 0, 1);
                                color: #fff;
                                border: none;
                                outline: none;
                                text-align: center;
                            }
                        }

                        &:after {
                            content: '';
                            display: block;
                            clear: both;
                        }
                    }
                }

                > p {
                    line-height: 24px;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 13px;
                    color: #aeaeae;
                }
            }
        }
    }
}

.swiper-button-next,
.swiper-button-prev {
    width: calc(var(--swiper-navigation-size) / 44 * 40);
    height: calc(var(--swiper-navigation-size) / 44 * 40);
}

    .swiper-button-prev:after {
        content: '';
        width: 100%;
        height: 100%;
        background: url('../../assets/image/icon/u281.png') no-repeat;
        background-size: contain;
    }
    .swiper-button-next:after {
        content: '';
        width: 100%;
        height: 100%;
        background: url('../../assets/image/icon/u279.png') no-repeat;
        background-size: contain;
    }

</style>
